﻿@page "/component/feedback/dimmer"

    <Pager DataSource="@(new List<string>(new[]{
                             "Demo","Content Dimmer","Full Screen","Disabled","Vertical Alignment","Inverted","Opacity","Partially Dimmer"
                         }))">
        <Body>
            <Header1 Divider>
                Dimmer
                <SubHeader>
                    A dimmer hides distractions to focus attention on particular content
                </SubHeader>
            </Header1>
            <PresentationPart Title="Demo">
                <Description>
                    A simple dimmer displays no content
                </Description>
                <RunTemplate>
                    <Segment>
                        <Dimmer Active />
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                    </Segment>
                </RunTemplate>
                <CodeTemplate>
                    @Code.GetCode(@"
```html
<Segment>
    <Dimmer Active />
    ...
</Segment>
```
")
                </CodeTemplate>
            </PresentationPart>
            <PresentationPart Title="Content Dimmer">
                <Description>
                    A dimmer can display content
                </Description>
                <RunTemplate>
                    <Segment>
                        <Dimmer Active>
                            <Content>
                                <Header2 Inverted Icon>
                                    <Icon IconClass="heart" /> Do you like me?
                                </Header2>
                            </Content>
                        </Dimmer>
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                    </Segment>
                </RunTemplate>
                <CodeTemplate>
                    @Code.GetCode(@"
```html
<Segment>
    <Dimmer>
        <Content>
            <Header2 Inverted Icon>
                <Icon IconClass=""heart"" /> Do you like me?
            </Header2>
        </Content>
    </Dimmer>
...
</Segment>
```
")
                </CodeTemplate>
            </PresentationPart>
            <PresentationPart Title="Full Screen">
                <Description>
                    A dimmer can be formatted to be fixed to the page
                </Description>
                <RunTemplate>
                    <Dimmer FullScreen Active="FullScreenActive">
                        <Content>
                            <Header2 Inverted Icon>
                                <Icon IconClass="attention" />
                                Dimmer Message!
                                <SubHeader>
                                    Dimmer sub-header
                                </SubHeader>
                                <Button Emphasis="Emphasis.Positive" @onclick="()=>ActiveDimmer(false)">Close</Button>
                            </Header2>
                        </Content>
                    </Dimmer>
                    <Button Emphasis="Emphasis.Primary" @onclick="()=>ActiveDimmer()">Show</Button>
                </RunTemplate>
                <CodeTemplate>
@Code.GetCode(@"
```html
<Dimmer FullScreen>
    <Content>
        <Header2 Inverted Icon>
            <Icon IconClass=""attention"" />
            Dimmer Message!
            <SubHeader>
                Dimmer sub-header
            </SubHeader>
        </Header2>
    </Content>
</Dimmer>
```
")
                </CodeTemplate>
            </PresentationPart>
            <PresentationPart Title="Disabled">
                <Description>
                    A disabled dimmer cannot be activated
                </Description>
                <RunTemplate>
                    <Segment>
                        <Dimmer Disabled />
                        <ParagraphDemo />
                    </Segment>
                </RunTemplate>
                <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    <Dimmer Disabled/>
...
</Segment>
```
")
                </CodeTemplate>
            </PresentationPart>
            <PresentationPart Title="Vertical Alignment">
                <Description>
                    A dimmer can have its content top or bottom aligned.
                </Description>
                <RunTemplate>
                    <Segment>
                        <Dimmer Active VerticalAlignment="VerticalAlignment.Top">
                            <Content>
                                <Header2 Inverted Icon>
                                    <Icon IconClass="heart" /> On the top
                                </Header2>
                            </Content>
                        </Dimmer>
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                    </Segment>
                    <Space/>
                    <Segment>
                        <Dimmer Active VerticalAlignment="VerticalAlignment.Middle">
                            <Content>
                                <Header2 Inverted Icon>
                                    <Icon IconClass="heart" /> In the middle
                                </Header2>
                            </Content>
                        </Dimmer>
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                    </Segment>
                    <Space/>
                    <Segment>
                        <Dimmer Active VerticalAlignment="VerticalAlignment.Bottom">
                            <Content>
                                <Header2 Inverted Icon>
                                    <Icon IconClass="heart" /> At the bottom
                                </Header2>
                            </Content>
                        </Dimmer>
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                    </Segment>
                </RunTemplate>
                <CodeTemplate>
                    @Code.GetCode(@"
```html
<Segment>
    <Dimmer Active VerticalAlignment=""VerticalAlignment.Top"">
        <Content>
            <Header2 Inverted Icon>
                <Icon IconClass=""heart"" /> On the top
            </Header2>
        </Content>
    </Dimmer>
...
</Segment>

<Segment>
    <Dimmer Active VerticalAlignment=""VerticalAlignment.Middle"">
        <Content>
            <Header2 Inverted Icon>
                <Icon IconClass=""heart"" /> In the middle
            </Header2>
        </Content>
    </Dimmer>
...
</Segment>

<Segment>
    <Dimmer Active VerticalAlignment=""VerticalAlignment.Bottom"">
        <Content>
            <Header2 Inverted Icon>
                <Icon IconClass=""heart"" /> At the bottom
            </Header2>
        </Content>
    </Dimmer>
...
</Segment>
```
")
                </CodeTemplate>
            </PresentationPart>
            <PresentationPart Title="Inverted">
                <Description>
                    A dimmer can be formatted to have its colors inverted
                </Description>
                <RunTemplate>
                    <Segment>
                        <Dimmer Inverted Active/>
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                        <ParagraphDemo />
                    </Segment>
                </RunTemplate>
                <CodeTemplate>
    @Code.GetCode(@"
```html
<Dimmer Inverted/>
```
")
                </CodeTemplate>
            </PresentationPart>
            <PresentationPart Title="Opacity">
                <Description>
                    A dimmer can be formatted to have a different depth of background shading
                </Description>
    <RunTemplate>
        <Segment>
            <Dimmer Active Opacity="Dimmer.OpacityLevel.Medium" />
            <ParagraphDemo />
        </Segment>
        <Space/>
        <Segment>
            <Dimmer Active Opacity="Dimmer.OpacityLevel.Light" />
            <ParagraphDemo />
        </Segment>
        <Space/>
        <Segment>
            <Dimmer Active Opacity="Dimmer.OpacityLevel.VeryLight" />
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    <Dimmer Active Opacity=""Dimmer.OpacityLevel.Medium"" />

</Segment>
<Segment>
    <Dimmer Active Opacity=""Dimmer.OpacityLevel.Light"" />
</Segment>
<Segment>
    <Dimmer Active Opacity=""Dimmer.OpacityLevel.VeryLight"" />
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Partially Dimmer">
                <Description>
                    A dimmer can be displayed only partially and limited to the overall height of its content instead of the whole to be covered area.
                </Description>
    <RunTemplate>
        <Segment>
            <Dimmer Active Partially="Dimmer.PartialPosition.Top">
                <Content>
                    <Header4 Inverted>Look!</Header4>
                    <SubHeader>Top Dimmer</SubHeader>
                </Content>
            </Dimmer>
            <ParagraphDemo />
            <ParagraphDemo />
            <ParagraphDemo />
        </Segment>
        <Space/>
        <Segment>
            <Dimmer Active Partially="Dimmer.PartialPosition.Center">
                <Content>
                    <Header4 Inverted>Look!</Header4>
                    <SubHeader>Middel Dimmer</SubHeader>
                </Content>
            </Dimmer>
            <ParagraphDemo />
            <ParagraphDemo />
            <ParagraphDemo />
        </Segment>
        <Space/>
        <Segment>
            <Dimmer Active Partially="Dimmer.PartialPosition.Bottom">
                <Content>
                    <Header4 Inverted>Look!</Header4>
                    <SubHeader>Bottom Dimmer</SubHeader>
                </Content>
            </Dimmer>
            <ParagraphDemo />
            <ParagraphDemo />
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Dimmer Active Partially=""Dimmer.PartialPosition.Top"">
...
</Dimmer>

<Dimmer Active Partially=""Dimmer.PartialPosition.Center"">
...
</Dimmer>

<Dimmer Active Partially=""Dimmer.PartialPosition.Bottom"">
...
</Dimmer>
```
")
    </CodeTemplate>
</PresentationPart>
        </Body>
    </Pager>
@code{

    bool FullScreenActive;

    void ActiveDimmer(bool active = true)
    {
        FullScreenActive = active;
        StateHasChanged();
    }
}